设计模式 - 观察者模式

最近比较闲，写一写观察者模式。

定义

定义对象间的一种一对多的依赖关系，使得每当一个对象状态发生改变时，其相关依赖对象皆得到通知并被自动更新。
该模式用于描述对象之间的关系，所以属于行为型模式。

结构

UML图

由上图我们可以看到一共需要构造四个类，两种继承关系，两种关联关系；

class Subject {
  constructor () {
    this.observerList = []
  }

  attach () {}

  detach () {}

  notify () {}
}

class Observer {
  constructor () {}

  update () {}
}

class ConcreteSubject extends Subject {
  constructor () {
    super();
    this.state = null;
  }
}

class ConcreteObserver extends Observer {
  constructor () {}

  update () {}
}

时序图

// 目标类
class Subject {
  constructor () {
    this.observerList = [];
  }
  // 注册观察者
  attach (observer) {
    const ob = this.observerList.find(itm => itm === observer);
    if (!ob) {
      this.observerList.push(observer);
    }
    return this
  }
  // 注销观察者
  detach (observer) {
    const obIndex = this.observerList.findIndex(itm => itm === observer);
    return obIndex > -1
      ? this.observerList.splice(obIndex, 1)[0]
      : this;
  }
  // 触发更新
  notify (state) {
    if (this.observerList.length) {
      this.observerList.forEach(observer => {
        observer instanceof Observer && observer.update(state);
      })
    }
    return this;
  }
}

// 观察者类
class Observer {
  constructor () {}

  update () {
    console.error('子类请重写 update 方法！');
  }
}


class ConcreteSubject extends Subject {
  constructor () {
    super();
    this.value = null;
  }

  set state (value) {
    this.value = value;
    this.notify(value);
  }

  get state (value) {
    return this.value;
  }
}

class ConcreteObserver extends Observer {
  constructor (fn) {
    super();
    this.updateFn = fn;
  }

  update (state) {
    this.updateFn(state);
  }
}

// 测试代码
const ob1Update = price => {
  if (price > 1000) {
    console.log('价格高于 1000，fuck!');
  } else {
    console.log('价格小于 1000，God Bless Me!');
  }
}

const ob2Update = price => {
  if (price > 2000) {
    console.log('价格高于 2000，fuck!');
  } else {
    console.log('价格小于 2000，God Bless Me!');
  }
}

let subject = new ConcreteSubject();
let ob1 = new ConcreteObserver(ob1Update);
let ob2 = new ConcreteObserver(ob2Update);

subject.attach(ob1).attach(ob2);
subject.state = 3000;

  // -> "价格高于 1000，fuck!"
  // -> "价格小于 2000，God Bless Me!"

这样我们就简单实现了一个观察者模式。

实践

对于观察者模式的实践，mobx 就是一个比较典型的案例。
如果觉得源码比较难读，可以参考大搜车团队的s-mobx

Java 实现

public interface WeatherObserver {
    public void update(WeatherType currentWeather);
}

import java.util.ArrayList;

public class Weather {
    private WeatherType currentWeather;
    private ArrayList<WeatherObserver> observers;

    public Weather() {
        observers = new ArrayList<WeatherObserver>();
        currentWeather = WeatherType.SUUNY;
    }

    public void addObserver(WeatherObserver observer) {
        this.observers.add(observer);
    }

    public void removeObserver(WeatherObserver observer) {
        this.observers.remove(observer);
    }

    public void setCurrentWeather(WeatherType weather) {
        this.currentWeather = weather;
        this.notified();
    }

    private void notified() {
        for (WeatherObserver observer: observers) {
            observer.update(currentWeather);
        }
    }
}

public enum WeatherType {
    SUUNY, RAINY, WINDY, COLD;

    @Override
    public String toString() {
        return this.name().toString();
    }
}

public class ChangShaReport implements WeatherObserver {
    public void update(WeatherType weatherType) {
        switch (weatherType) {
            case SUUNY:
                System.out.println("Today is a sunny day!");
                break;
            case COLD:
                System.out.println("Today is a cold day!");
                break;
            case WINDY:
                System.out.println("Today is a windy day!");
                break;
            case RAINY:
                System.out.println("Today is a rainy day!");
                break;
            default:
                System.out.println("Error!");
                break;
        }
    }
}

图解设计模式